<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./images/youmi_logo1.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>佑蜜官网-关于我们</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="swiper/swiper.min.css">
</head>

<body>
    <div class="app">
        <div class="page-auto activity">
            @@include('./nav.html',{
            "activity": "active"
            })
            <div class="activity__containter">
                <div class="banner">
                    <a href="https://mp.weixin.qq.com/s/WXBaBiF6k-JEbUJzo4gitg" target="_block">
                        <img src="./images/banner1.png" alt="s">
                    </a>
                </div>
                <div class="banner">
                    <a href="https://mp.weixin.qq.com/s/p86lbiZ-9wbCj9OpSLbOjA" target="_block">
                        <img src="./images/banner2.png" alt="">
                    </a>
                </div>
                <div class="clear"></div>

                <h3 class="title">
                    用 户 说
                </h3>

                <div class="talk-box">
                    <div class="talk-item">
                        <img src="./images/user1.png" alt="">
                        <div class="name">
                            程程
                        </div>
                        <div class="clear"></div>
                        <p>
                            用了佑蜜大概三个月左右吧，上个月竟然没来姨妈，去医院一查，果然中奖了，婆婆和老公都高兴坏了。
                        </p>
                    </div>
                    <div class="talk-item">
                        <img src="./images/user2.png" alt="">
                        <div class="name">
                            轩宝宝
                        </div>
                        <div class="clear"></div>
                        <p>
                            试了一段时间，操作很方便，用一次就上手了，先多吃一段时间叶酸，同时健身，做足充分准备就按照佑蜜指导迎接宝宝。
                        </p>
                    </div>
                    <div class="talk-item">
                        <img src="./images/user3.png" alt="">
                        <div class="name">
                            悠梨悠梨酱
                        </div>
                        <div class="clear"></div>
                        <p>
                            被表姐种草了佑蜜，区别于一般的备孕工具，试了以后觉得好方便，用了4个月，真的中奖了！
                        </p>
                    </div>
                    <div class="talk-item">
                        <img src="./images/user4.png" alt="">
                        <div class="name">
                            易
                        </div>
                        <div class="clear"></div>
                        <p>
                            测试的时候用唾液滴在仪器上就行，会智能给出优孕时间。感觉做的挺好的，希望快点怀上宝宝。
                        </p>
                    </div>
                    <div class="clear"></div>
                    <div class="talk-item" style="background: none;">

                    </div>
                    <div class="talk-item">
                        <img src="./images/user5.png" alt="">
                        <div class="name">
                            徐北鼻
                        </div>
                        <div class="clear"></div>
                        <p>
                            使佑蜜一点不耽误我的上班时间，比去医院检查方便多了。大概坚持检测了五六个月，成功怀上了宝宝。
                        </p>
                    </div>
                    <div class="talk-item">
                        <img src="./images/user6.png" alt="">
                        <div class="name">
                            何必远方
                        </div>
                        <div class="clear"></div>
                        <p>
                            闺蜜生日送了她一瓶lamer和一个佑蜜，她一直在用，没想到过了3个月就怀上宝宝了。正在备孕的小伙伴也都赶紧试试吧!
                        </p>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="activity-bottom">
            <img class="active-bottom-img" src="./images/activity-bg-bottom.png" alt="">
            <div class="activity-bottom-container">
                <h3 class="title">
                    好孕接力
                </h3>
                <div class="swiper">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="swiper-box">
                                    <img src="./images/user4.png" alt="">
                                    <div class="name">飘飘<span>35岁</span></div>
                                    <div class="time">预产期2020.02.02</div>
                                    <div class="week">（佑蜜检测6个周期）</div>
                                </div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <!-- <div class="swiper-pagination"></div> -->
                    </div>
                </div>
            </div>

            <div class="activity-footer">
                @@include('./footer.html')
            </div>
        </div>

        <img class="bg activity-bg-left" src="./images/activity-bg-left.png" alt="">
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./swiper/swiper.min.js"></script>
    <script>
        var appendNumber = 4;
        var prependNumber = 1;
        var swiper = new Swiper('.swiper-container', {
            autoplay: {
                delay: 1000, //1秒切换一次
            },
            loop: true,
            slidesPerView: 5,
            centeredSlides: true,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });

        const formatDate = function (time) {
            var date = new Date(time);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            return y + "." + m + "." + d;
        }

        var url = "/activity/GET/pregnancyList";
        $.ajax({
            type: 'GET',
            url: url,
            success: function (res) {
                res = JSON.parse(res);
                if (res.status == "200") {
                    res.data.forEach(item => {
                        swiper.appendSlide([
                            '<div class="swiper-slide">' +
                            ' <div class="swiper-box">' +
                            '<img src="' + item.headImage + '" alt="">' +
                            '<div class="name">' + item.nickName + '<span>' + item.age +
                            '岁</span></div>' +
                            ' <div class="time">预产期' + formatDate(item.expectedDate) +
                            '</div>' +
                            '  <div class="week">（佑蜜检测' + item.periods + '个周期）</div>' +
                            '  </div>' +
                            '  </div>'
                        ]);
                    })
                }
            }
        })
    </script>
</body>

</html>